<template>
  <page-header-wrapper>
    <page-tab-list>
      <div class="table-page-search-box">
        <a-form layout="inline">
          <a-row :gutter="24">
            <a-col :md="6" :sm="24">
              <a-form-item label="拼团ID">
                <a-input allowClear placeholder="请输入拼团ID" v-model="queryParam.pt_number"></a-input>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item label="商品名称">
                <a-input allowClear placeholder="请输入商品名称" v-model="queryParam.name"></a-input>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item label="">
                <a-button type="primary" @click="getList(1)">查询</a-button>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </page-tab-list>
    <a-card :border="false">
      <div class="table-operator" style="display: flex; justify-content: space-between">
        <a-radio-group v-model="queryParam.status" @change="getList(1)">
          <a-radio-button :value="0"> 全部 </a-radio-button>
          <a-radio-button :value="1"> 进行中 </a-radio-button>
          <a-radio-button :value="2"> 已成功 </a-radio-button>
          <a-radio-button :value="3"> 已失败 </a-radio-button>
        </a-radio-group>

        <!-- <div>
          <a-button type="primary" icon="plus" @click="showModal()">添加</a-button>
          <a-dropdown>
            <a-menu slot="overlay">
              <a-menu-item @click="handleAll(selectedRowKeys, 2)">批量删除</a-menu-item>
              <a-menu-item @click="handleAll(selectedRowKeys, 1)">批量开启</a-menu-item>
              <a-menu-item @click="handleAll(selectedRowKeys, 0)">批量禁用</a-menu-item>
            </a-menu>
            <a-button> 批量操作 </a-button>
          </a-dropdown>
        </div> -->
      </div>
      <a-table
        :rowKey="
          (r, i) => {
            return r.id
          }
        "
        size="default"
        :dataSource="tabList"
        :pagination="{
          total: this.total,
          showSizeChanger: false,
          onChange: this.getList,
        }"
        :columns="columns"
        :scroll="{ x: 'max-content' }"
      >
        <div slot="goodsInfo" slot-scope="item" class="flex">
          <a-avatar :src="item.pic" shape="square" :size="64" />
          <div class="flex-w-1" style="margin-left: 10px">
            <div class="text-more-2">{{ item.goods_name }}</div>
          </div>
        </div>

        <div slot="status" slot-scope="status">
          <a-badge :color="getStatus(status)[1]" :text="getStatus(status)[0]" />
        </div>
        <span slot="action" slot-scope="text, record">
          <a-button type="link" @click="toOrderDetail(record)">拼团信息</a-button>
          <a-button v-if="record.error_order_num > 0" type="link"
                    @click="toLoserHandle(record.pt_number)">处理异常(退款)</a-button>
        </span>
      </a-table>
    </a-card>
  </page-header-wrapper>
</template>

<script>
const columns = [
  {
    title: '拼团ID',
    dataIndex: 'id',
    width: 100
  },
  {
    title: '商品信息',
    scopedSlots: {
      customRender: 'goodsInfo'
    }
  },
  {
    title: '成团人数',
    dataIndex: 'party_size',
    width: 140,
    sorter: (a, b) => a.party_size - b.party_size
  },
  {
    title: '当前人数 ',
    dataIndex: 'join_num',
    sorter: (a, b) => a.join_num - b.join_num,
    width: 140
  },
  {
    title: '发起时间',
    dataIndex: 'pay_time',
    width: 200,
    sorter: (a, b) => Number(new Date(a.pay_time)) - Number(new Date(b.pay_time))
  },
  {
    title: '状态',
    dataIndex: 'status',
    filters: [
      { text: '进行中', value: 1 },
      { text: '已成功', value: 2 },
      { text: '已失败', value: 3 }
    ],
    onFilter: (value, record) => record.status == value,
    scopedSlots: {
      customRender: 'status'
    },
    width: 140
  },
  {
    title: '操作',
    width: 140,
    scopedSlots: {
      customRender: 'action'
    }
  }
]
import pt from '@/api/pt'

export default {
  components: {},
  data () {
    return {
      columns,
      tabList: [],
      queryParam: {
        name: '',
        status: 0,
        pageNo: 1,
        pageSize: 10
      },
      total: 0
    }
  },
  computed: {
    getStatus () {
      return (status) => {
        let text, color
        switch (String(status)) {
          case '3':
            text = '已失败'
            color = '#ff0000'
            break

          case '2':
            text = '已成功'
            color = '#65C817'
            break
          case '1':
            text = '进行中'
            color = '#1890FF'
            break
        }
        return [text, color]
      }
    }
  },
  created () {
    this.getList()
  },
  methods: {
    async getList (pageNo) {
      pageNo && (this.queryParam.pageNo = pageNo)
      const res = await pt.ptOrderList(this.queryParam)
      this.tabList = res.data.data
      this.total = res.data.totalCount
    },

    toOrderDetail (item) {
      this.$router.push({ path: '/pt/orderDetail?pt_number=' + item.pt_number })
    },

    async toLoserHandle (pt_number) {
      const res = await pt.loserHandle({ pt_number: pt_number })
      if (res.code == 0) {
        this.$message.success(res.msg)
        this.getList()
      } else {
        this.$error({
          content: res.msg
        })
      }
    }
  }
}
</script>

<style></style>
